<template>
  <div v-loading="loading" class="app-container" style="height: 88vh">
    <!-- :hosts ="form.hosts" -->
    <div class="group-list" style="height: 80vh; overflow-y: auto; overflow-x: hidden">
      <applyDetails
        @assignment="assignment"
        :priceFlag="priceFlag"
        :taskName="taskName"
        :configure="configure"
        :form="form"
        ref="applyDetails"
        @upload="upload"
      />
      <div class="title" style="margin-top: 30px">流程图</div>
      <Process ref="process" style="margin-bottom: 10px" />
      <div class="title" style="margin-top: 30px">审批流程</div>
      <div class="xx">
        <ul class="timeline-wrapper">
          <li class="timeline-item" v-for="t in timelineList" :key="t.id">
            <div class="timeline-box">
              <div class="out-circle">
                <div class="in-circle"></div>
              </div>
              <div class="long-line"></div>
            </div>
            <div class="timeline-content">
              <div class="box">
                <div class="timeline-title">{{ t.name }}</div>
                <div class="timeline-date">{{ t.time }}</div>
              </div>
              <div class="timeline-desc" style="margin-bottom: 10px">
                {{ t.assigneeName }}
                <span :style="ActionColorStatus(t.action)">{{ t.actionName }}</span>
              </div>
              <div class="timeline-desc" v-if="t.action">审批意见：{{ t.comment }}</div>
              <div class="table" v-if="t.incrs">
                <table
                  v-if="
                    taskName == '监管平台接收' ||
                    taskName == '监管平台初核' ||
                    taskName == '大数据中心复核' ||
                    taskName == '监管平台派发'
                  "
                >
                  <tr>
                    <!-- v-show="taskName =='监管平台接收' || taskName =='监管平台初核' || taskName =='大数据中心复核' || taskName =='监管平台派发' || taskName =='监管平台确认'" -->
                    <th>资源分组</th>
                    <th>资源名称</th>
                    <th>用量变化</th>
                    <th>金额变化（天）</th>
                  </tr>
                  <tr v-for="(n, nindex) in t.incrs" :key="nindex">
                    <td style="color: rgb(153, 153, 153); text-align: left">
                      {{ n.groupBy }}
                    </td>
                    <td style="color: rgb(153, 153, 153); text-align: left">
                      {{ n.resourceName }}
                    </td>
                    <!-- v-show="taskName =='监管平台接收' || taskName =='监管平台初核' || taskName =='大数据中心复核' || taskName =='监管平台派发' || taskName =='监管平台确认'" -->
                    <td
                      :style="
                        n.incrAmount >= 0 ? 'color:red;text-align: right;' : 'color:rgb(32,178,170);text-align: right;'
                      "
                    >
                      <template>
                        <img
                          v-show="n.incrAmount"
                          style="width: 12px"
                          v-if="n.incrAmount > 0"
                          src="../../../assets/icons/top.png"
                          alt=""
                        />
                        <img
                          v-show="n.incrAmount"
                          style="width: 12px"
                          v-if="n.incrAmount < 0"
                          src="../../../assets/icons/botton.png"
                          alt=""
                        />
                      </template>
                      <span>
                        {{ n.incrAmount ? (Number(n.incrAmount) >= 0 ? n.incrAmount : n.incrAmount) : "" }}
                        {{ n.incrAmountUnit }}
                      </span>
                    </td>
                    <td
                      :style="
                        n.groupBy == '合计'
                          ? Number(n.incrMoney) >= 0
                            ? 'color:red;text-align: right'
                            : 'color:rgb(32,178,170);text-align: right;'
                          : Number(n.incrAmount) >= 0
                          ? 'color:red;text-align: right'
                          : 'color:rgb(32,178,170);text-align: right;'
                      "
                    >
                      <template>
                        <img
                          v-show="n.incrMoney"
                          style="width: 12px"
                          v-if="(n.incrAmount || n.incrForward) > 0"
                          src="../../../assets/icons/top.png"
                          alt=""
                        />
                        <img
                          v-show="n.incrMoney"
                          style="width: 12px"
                          v-if="(n.incrAmount || n.incrForward) < 0"
                          src="../../../assets/icons/botton.png"
                          alt=""
                        />
                      </template>
                      {{n.incrMoney &lt; 0 ? '￥' + n.incrMoney : '￥' + n.incrMoney}}
                      元
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <applyButton
      @openClose="openClose"
      :taskId="taskId"
      :taskName="taskName"
      @fileUp="fileUp"
      :detail="form"
      ref="applyButton"
    />
  </div>
</template>
<script>
import request from "@/utils/request";
import { taskTodoList, ResourcesChange } from "@/api/todoItem/todo.js";
import { listHistory } from "@/api/activiti/example.js";

import { instId, serviceByClazz, classByCode, listByCode, formResourceUp, specEcs } from "@/api/resources/apply.js";

import { getChangeDetail } from "@/api/resources/change.js";
import { getDicts } from "@/api/system/dict/data";

import applyDetails from "./addCTodoNoXc.vue";
import applyButton from "./button.vue";

import Process from "./process.vue";
export default {
  name: "ChangeDetailsAgencyNoXc",
  components: {
    Process,
    applyDetails,
    applyButton,
  },
  data() {
    return {
      timelineList: [],
      // 遮罩层
      loading: false,
      btnLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 待办表格数据
      taskList: [],
      // 弹出层标题
      title: "",
      // 显示/隐藏审批历史
      openHistory: false,
      // 审批历史遮罩层
      historyLoading: false,
      // 审批历史列表
      historyList: [],
      // 审批历史列表数量
      historyTotal: 0,

      // 审批历史查询参数
      historyParams: {
        pageNum: 1,
        pageSize: 10,
        // taskId: null,
        // taskName: null,
      },
      // 任务id
      taskId: "",
      // 流程
      definitionName: "",
      // 节点
      taskName: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // taskId: null,
        // taskName: null,
      },

      //数据详情
      form: {},
      //配置
      configure: {
        dept: [],
        available_domain: [], //可用域
        cloud_service_provider: [], //服务商
        storage_type: [], //系统盘类型
        codeList: [], //云服务器规格列表
        czxtList: [], //操作系统列表
        ccList: [], //数据盘类型
        fwcpList: [], //服务型磁盘类型
        wlfwqList: [], //高性能服务器资源类型
        sjkList: [], //数据库类型
        yyaqList: [], //安全产品
        CpuFrameworkList: [], //CPU架构
        SpecificationsList: [],
      },
      //是否显示预估费用
      priceFlag: false,
      roleName: sessionStorage.getItem("roleName"),
      funNumber: 0,
    };
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews;
    },
    routerUrl() {
      return this.$route.path;
    },
  },
  watch: {
    visitedViews(value) {
      if (value) {
        if (this.$options.name == "ChangeDetailsAgencyNoXc") {
          this.funNumber = 0;
          this.ObLoder();
          return;
        }
        this.$destroy(this.$options.name);
        this.funNumber = 0;
      }
    },
    routerUrl(value) {
      if (value == "/todoItem/todoS/ChangeDetailsAgencyNoXc") {
        this.funNumber = 0;
        this.ObLoder();
      }
    },
  },
  beforeDestory() {},
  created() {
    this.ObLoder();
  },
  beforeDestroy() {},
  methods: {
    fileUp() {
      this.$refs.applyDetails.fileUp();
    },
    //上传文件回调
    upload(files) {
      this.$refs.applyButton.examineSubmit(-1, files);
    },
    ObLoder() {
      this.loading = true;
      var list = JSON.parse(sessionStorage.getItem("ChangeDetailsAgencyNoXc"));
      this.title = list.taskName;
      this.taskId = list.taskId;
      this.definitionName = list.definitionName;
      this.taskName = list.taskName;
      this.btnLoading = true;
      var ifStatistic = "false";
      if (
        ["政务云管理员", "云资源管理中心管理员", "云资源管理中心运维", "大数据中心", "监管平台"].indexOf(
          this.roleName
        ) > -1
      ) {
        ifStatistic = "true";
        this.priceFlag = true;
      } else {
        this.priceFlag = false;
      }
      ResourcesChange({ ifStatistic, id: list.instanceId })
        .then((res) => {
          this.funNumber++;
          this.getDataOfAdd(res.data.cloudSupplier, res.data, ifStatistic, list);
        })
        .finally(() => {
          this.btnLoading = false;
          this.loading = false;
        });
    },
    // 最后赋值
    assignment(data) {
      this.form = JSON.parse(JSON.stringify(data));
    },
    //添加存储产品列表
    addStoreProducts(data) {
      this.configure[data.productCode == "共享型" ? "ccList" : "fwcpList"].some((it) => {
        if (it.code == data.diskServerCode) {
          data.diskServerCode_label = it.serviceName;
          return true;
        }
      });
      if (this.addShow == 2) {
        this.form.storeProducts[this.index - this.form.hosts.length - this.form.databases.length] = data;
      } else {
        this.form.storeProducts.push(data);
      }
      this.addShow = false;
    },
    addTable(data) {
      data = JSON.parse(JSON.stringify(data));
      if (data.flavorType) {
        this.addHosts(data);
      } else if (data.serverCode) {
        this.addDatabases(data);
      } else {
        this.addStoreProducts(data);
      }
    },
    //添加修改数据库列表
    addDatabases(data) {
      //数据库类型
      this.configure.sjkList.some((it) => {
        if (it.code == data.serverCode) {
          data.serverCode_label = it.serviceName;
          return true;
        }
      });
      if (this.addShow == 2) {
        this.form.databases[this.index - this.form.hosts.length] = data;
      } else {
        this.form.databases.push(data);
      }
      this.addShow = false;
    },
    //添加修改服务器列表
    addHosts(data) {
      //可用域
      this.configure.available_domain.some((item) => {
        if (item.dictValue == data.availableDomain) {
          data.availableDomain_label = item.dictLabel;
          return true;
        }
      });
      this.configure.codeList.some((item) => {
        if (data.cloudFlavorCode == item.specCode) {
          item.details.forEach((it) => {
            if (it.serviceCode == "vcpu") {
              data.cpuNumber = it.serviceCount;
              data.serviceCode = it.serviceCode;
            }
            if (it.serviceCode == "memory") {
              data.memorySize = it.serviceCount;
              data.memoryServerCode = it.serviceCode;
            }
          });
          return;
        }
      });
      //数据盘类型
      data.disks.forEach((item) => {
        this.configure.ccList.some((it) => {
          if (it.code == item.diskServerCode) {
            item.diskServerCode_label = it.serviceName;
            return true;
          }
        });
      });
      if (data.flavorType == 1) {
        //系统盘类型
        this.configure.storage_type.some((item) => {
          if (item.code == data.osDisk.diskServerCode) {
            data.osDisk.diskServerCode_label = item.serviceName;
            return true;
          }
        });
        //规格
        this.configure.codeList.some((item) => {
          if (item.specCode == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.specName;
            data.cloudFlavorCode_desc = item.desc;
            return true;
          }
        });
      }
      if (data.flavorType == 2) {
        this.configure.wlfwqList.some((item) => {
          if (item.code == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.serviceName;
            data.cloudFlavorCode_desc = item.remark;
            return true;
          }
        });
      }
      if (this.addShow == 2) {
        if (data.hostName && data.hostName == data.instanceName + "_" + data.num) {
          this.form.hosts[this.index] = data;
        } else {
          this.form.hosts.splice(this.index, 1);
          let sum = 0;
          this.form.hosts.forEach((item) => {
            if (item.instanceName == data.instanceName && item.num > sum) {
              sum = item.num;
            }
          });
          data.num = sum + 1;
          data.hostName = data.instanceName + "_" + data.num;
          this.form.hosts.push(data);
        }
      } else {
        let num = Number(data.instanceNum);
        data.instanceNum = 1;
        let sum = 0;
        this.form.hosts.forEach((item) => {
          if (item.instanceName == data.instanceName && item.num > sum) {
            sum = item.num;
          }
        });
        for (let i = 0; i < num; i++) {
          let temp = JSON.parse(JSON.stringify(data));
          if (!temp.num) {
            temp.num = sum + i + 1;
          }
          temp.hostName = temp.instanceName + "_" + temp.num;
          this.form.hosts.push(temp);
          this.hosts.push(temp);
        }
      }

      this.addShow = false;
    },
    // 返回审核意见颜色状态
    ActionColorStatus(name) {
      if (name == "COMPLETE") {
        return `margin-left: 10px;color : #008000`;
      } else if (name == "BACK") {
        return `margin-left: 10px;color : #FFA500`;
      } else if (name == "REJECT") {
        return `margin-left: 10px;color : #FFA500`;
      } else if (name == "DELEGATE") {
        return `margin-left: 10px;color : #FFA500`;
      } else if (name == "JUMP") {
        return `margin-left: 10px;color : #FFA500`;
      } else if (name == "DELETE") {
        return `margin-left: 10px;color : #ff0000`;
      } else {
        return `margin-left: 10px;`;
      }
    },
    //获取配置信息
    getDicts() {
      for (let item in this.configure) {
        getDicts(item).then((response) => {
          this.configure[item] = response.data;
        });
      }
    },

    //关闭弹窗
    openClose(flag) {
      this.open = false;
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex((item) => item.path === this.$route.path),
        1
      );
      this.$destroy(this.$options.name);
      this.$router.push("/todoItem/todo");
    },
    // 审批历史查询
    formResourceUps(id) {
      formResourceUp(id).then((res) => {
        this.timelineList = res.rows;
      });
    },

    //获取一些配置数据
    getDataOfAdd(data, formdata, ifStatistic, list) {
      if (this.funNumber > 1) {
      } else {
        this.configure = {
          dept: [],
          available_domain: [], //可用域
          cloud_service_provider: [], //服务商
          storage_type: [], //系统盘类型
          codeList: [], //云服务器规格列表
          czxtList: [], //操作系统列表
          ccList: [], //数据盘类型
          fwcpList: [], //服务型磁盘类型
          wlfwqList: [], //高性能服务器资源类型
          sjkList: [], //数据库类型
          yyaqList: [], //安全产品
          CpuFrameworkList: [], //CPU架构
          SpecificationsList: [],
        };
        var detail = formdata;
        // 获取信创CPU或者内存规格
        specEcs({ Inspur: data }).then((res) => {
          res.rows.push({
            specName: "自定义",
            cpuNumber: 0,
            cpuCode: "vcpu",
            memorySize: 4,
            memoryCode: "memory",
          });
          this.configure.SpecificationsList = res.rows;
        });
        //可用域
        getDicts("available_domain").then((response) => {
          this.configure.available_domain = response.data;
        });
        //服务商
        getDicts("cloud_service_provider").then((response) => {
          this.configure.cloud_service_provider = response.data;
        });
        //盘类型
        serviceByClazz({ code: "cc", supplier: data }).then((response) => {
          response.data.forEach((item) => {
            if (["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(item.code) < 0) {
              this.configure.storage_type.push(item);
            }
            if (["spycc2"].indexOf(item.code) < 0) {
              this.configure.ccList.push(item);
            }
            if (["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(item.code) < 0) {
              this.configure.fwcpList.push(item);
            }
          });
        });
        //操作系统
        classByCode({ code: "czxt" }).then((response) => {
          this.configure.czxtList = response.data;
        });
        // //云服务器规格列表
        // listByCode("spec_ecs").then((response) => {
        //     this.configure.codeList = response.data;
        // });
        //高性能服务器资源类型列表
        serviceByClazz({ code: "wlfwq", supplier: data }).then((response) => {
          this.configure.wlfwqList = response.data;
        });
        //数据库类型列表
        serviceByClazz({ code: "sjk", supplier: data }).then((response) => {
          this.configure.sjkList = response.data;
        });
        //安全产品列表
        serviceByClazz({ code: "yyaq", supplier: data }).then((response) => {
          this.configure.yyaqList = response.data;
        });
        setTimeout(() => {
          this.configure.cloud_service_provider.some((item) => {
            if (item.dictValue == detail.cloudSupplier) {
              detail.cloudSupplier_label = item.dictLabel;
              return true;
            }
          });
          detail.storeProducts.forEach((data) => {
            this.configure[data.productCode == "共享型" ? "ccList" : "fwcpList"].some((it) => {
              if (it.code == data.diskServerCode) {
                data.diskServerCode_label = it.serviceName;
                return true;
              }
            });
            data.hostInstanceNames = [];
            if (data.hosts) {
              data.hosts.forEach((item) => {
                data.hostInstanceNames.push(item.instanceName);
              });
            }
          });
          detail.databases.forEach((data) => {
            this.configure.sjkList.some((it) => {
              if (it.code == data.serverCode) {
                data.serverCode_label = it.serviceName;
                return true;
              }
            });
          });
          detail.hosts.forEach((data) => {
            data.hostName = data.instanceName;
            //可用域
            this.configure.available_domain.some((item) => {
              if (item.dictValue == data.availableDomain) {
                data.availableDomain_label = item.dictLabel;
                return true;
              }
            });
            //数据盘类型
            if (data.disks && data.disks.length) {
              data.disks.forEach((item) => {
                this.configure.ccList.some((it) => {
                  if (it.code == item.diskServerCode) {
                    item.diskServerCode_label = it.serviceName;
                    return true;
                  }
                });
              });
            } else {
              data.disks = [];
            }
            if (data.flavorType == 1) {
              //系统盘类型
              if (data.osDisk) {
                this.configure.storage_type.some((item) => {
                  if (item.code == data.osDisk.diskServerCode) {
                    data.osDisk.diskServerCode_label = item.serviceName;
                    return true;
                  }
                });
              }
              this.configure.codeList.some((item) => {
                if (item.specCode == data.cloudFlavorCode) {
                  data.cloudFlavorCode_label = item.specName;
                  data.cloudFlavorCode_desc = item.desc;
                  return true;
                }
              });
            }
            if (data.flavorType == 2) {
              this.configure.wlfwqList.some((item) => {
                if (item.code == data.cloudFlavorCode) {
                  data.cloudFlavorCode_label = item.serviceName;
                  data.cloudFlavorCode_desc = item.remark;
                  return true;
                }
              });
            }
          });
          setTimeout(() => {
            detail.safeProductsList = [];
            let productNames = [];
            detail.safeProducts.forEach((item) => {
              if (productNames.indexOf(item.productName) < 0) {
                productNames.push(item.productName);
                let num = 0;
                if (item.changeTo && item.changeTo.insStatus != "REMOVE") {
                  num = 1;
                }
                detail.safeProductsList.push({
                  name: item.productName,
                  num,
                  ysnum: 1,
                });
              } else {
                if (item.changeTo && item.changeTo.insStatus != "REMOVE") {
                  detail.safeProductsList[productNames.indexOf(item.productName)].num++;
                }
                detail.safeProductsList[productNames.indexOf(item.productName)].ysnum++;
              }
            });

            detail.hosts.forEach((item, index) => {
              let changeItem = item.changeTo,
                changeDiskFlag = false;
              if (changeItem) {
                if (item.disks.length != changeItem.length) {
                  changeDiskFlag = true;
                } else {
                  item.disks.some((it, inde) => {
                    let flag = true;
                    changeItem.disks.some((i, ind) => {
                      if (it.diskServerName == i.diskServerName && it.dataDiskSize == i.dataDiskSize) {
                        flag = false;
                        changeItem.splice(ind, 1);
                        return true;
                      }
                    });
                    changeDiskFlag = flag;
                    if (flag) {
                      return true;
                    }
                  });
                }
              }
              detail.hosts[index].changeDiskFlag = changeDiskFlag;
            });
            this.form = detail;
            this.form.ifStatistic = ifStatistic == "true" ? true : false;
            this.open = true;
            this.formResourceUps(list.instanceId);
            this.$refs.process.init(list);
            this.loading = false;
          }, 200);
        }, 100);
      }
    },

    /** 查询审批历史 */
    showHistory(data) {
      this.historyList = [];
      this.title = data.taskName;
      this.openHistory = true;
      this.historyParams = {
        pageNum: 1,
        pageSize: 10,
        processInstanceId: data.instanceId,
      };
      this.getHistory();
    },
    getHistory() {
      this.btnLoading = true;
      this.historyLoading = true;
      listHistory(this.historyParams)
        .then((response) => {
          this.historyList = response.rows;
          this.historyTotal = response.total;
          this.historyLoading = false;
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },

    /** 查询待办列表 */
    getList() {
      taskTodoList(this.queryParams).then((response) => {
        this.taskList = response.rows;
        this.total = response.total;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        taskId: null,
        taskName: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加待办";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getDemo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改待办";
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .group-list::-webkit-scrollbar {
    width: 4px;
  }

  .group-list::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
  }
}

.title {
  text-align: left;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  padding-left: 4px;
  border-left: 4px solid #38b3aa;
}

.xx {
  ul.timeline-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* 时间线 */
  .timeline-item {
    position: relative;

    .timeline-box {
      text-align: center;
      position: absolute;

      .out-circle {
        width: 16px;
        height: 16px;
        background: rgba(14, 116, 218, 0.1);
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
        /*opacity: 0.1;*/
        border-radius: 50%;
        display: flex;
        align-items: center;

        .in-circle {
          width: 8px;
          height: 8px;
          margin: 0 auto;
          background: rgba(14, 116, 218, 1);
          border-radius: 50%;
          box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
        }
      }

      .long-line {
        width: 2px;
        height: 98px;
        height: 100%;
        background: rgba(14, 116, 218, 1);
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
        opacity: 0.1;
        margin-left: 8px;
      }
    }

    .timeline-content {
      box-sizing: border-box;
      margin-left: 20px;
      height: auto;
      padding: 0 0 0 20px;
      text-align: left;
      margin-bottom: 30px;

      .box {
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .timeline-title {
          font-size: 18px;
          // word-break: break-all;
          color: #333;
          font-weight: 500;
          /*display: inline;*/
        }

        .timeline-date {
          margin-left: 50px;
          font-size: 16px;
          color: #333;
          font-weight: 500;
        }
      }

      .timeline-desc {
        font-size: 14px;
        margin-bottom: 10px;
        color: #999999;
      }

      .table {
        table {
          // width: 500px;
          border: 1px solid #fff;
          padding: 5px;
          border-collapse: collapse; //使边框合并为一个单一的边框
          font-size: 14px;
        }

        th {
          border: 1px solid rgb(250, 249, 255);
          background-color: rgb(250, 249, 255);
          color: rgb(0, 0, 0);
          padding: 5px 10px;
        }

        td {
          border: 1px solid rgb(250, 249, 255);
          padding: 5px 10px;
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }

  .timeline-item:last-of-type .timeline-content {
    margin-bottom: 0;
  }
}
</style>
